/**
 * 通用组件共同的使用的基础组件，原先放在 adapter/form 内部，限制了使用范围，这里提取出来，方便其他地方使用
 * 可用于 vben-form、vben-modal、vben-drawer 等组件使用,
 */

import type { BaseFormComponentType } from '@vben/common-ui';

import type { Component, SetupContext } from 'vue';
import { h } from 'vue';

import { globalShareState } from '@vben/common-ui';
import { $t } from '@vben/locales';

import {
  ElButton,
  ElCheckbox,
  ElCheckboxGroup,
  ElDivider,
  ElInput,
  ElInputNumber,
  ElNotification,
  ElRadioGroup,
  ElOption,
  ElSelect,
  ElSpace,
  ElSwitch,
  ElTimePicker,
  ElTreeSelect,
  ElUpload,
  ElRadio,
  ElRadioButton
} from 'element-plus';

type Options =
  | InstanceType<typeof ElRadio>['$props']
  | InstanceType<typeof ElRadioButton>['$props'];

interface Props {
  options?: Options[];
  optionType: 'button' | 'default';
}
//解决单选或多选无法显示问题
const withRadioGroup = <T extends Component>(component: T) => {
   return (props: Props, { attrs }: Omit<SetupContext, "expose">)=> { 
    return h(component, {...attrs }, () => {
      return props.options?.map((item) => {
        return h(
          props.optionType === 'button' ? ElRadioButton : ElRadio,
          { value: item.value }, 
          () => item.label,
        );
      });
    });
  };
};

const withDefaultPlaceholder = <T extends Component>(
        component: T,
        type: 'input' | 'select',
      ) => {
    return (props: any, { attrs, slots }: Omit<SetupContext, 'expose'>) => {
      const placeholder = props?.placeholder || $t(`ui.placeholder.${type}`);
      return h(component, { ...props, ...attrs, placeholder }, slots);
    };
  };
//解决select下拉框中的数据无法显示问题
  const customSelectRender = <T extends Component>(component: T) => {
    return (props: any, { attrs }: Omit<SetupContext, 'expose'>) => {
      const placeholder = props?.placeholder || $t(`placeholder.select`);
      const options = props.options;
      return h(component, { ...props, ...attrs, placeholder }, () => {
        // ElOption,
        return options?.map((option: any) =>
          h(ElOption, { label: option.label, value: option.value }),
        );
      });
    };
  };

  // 这里需要自行根据业务组件库进行适配，需要用到的组件都需要在这里类型说明
  export type ComponentType =
    | 'Checkbox'
    | 'CheckboxGroup'
    | 'DatePicker'
    | 'Divider'
    | 'Input'
    | 'InputNumber'
    | 'RadioGroup'
    | 'Select'
    | 'Space'
    | 'Switch'
    | 'TimePicker'
    | 'TreeSelect'
    | 'Upload'
    | BaseFormComponentType;

  async function initComponentAdapter() {
    const components: Partial<Record<ComponentType, Component>> = {
      // 如果你的组件体积比较大，可以使用异步加载
      // Button: () =>
      // import('xxx').then((res) => res.Button),

      Checkbox: ElCheckbox,
      CheckboxGroup: ElCheckboxGroup,
      // 自定义默认按钮
      DefaulButton: (props, { attrs, slots }) => {
        return h(ElButton, { ...props, attrs, type: 'info' }, slots);
      },
      // 自定义主要按钮
      PrimaryButton: (props, { attrs, slots }) => {
        return h(ElButton, { ...props, attrs, type: 'primary' }, slots);
      },
      Divider: ElDivider,
      Input: withDefaultPlaceholder(ElInput, 'input'),
      InputNumber: withDefaultPlaceholder(ElInputNumber, 'input'),
      RadioGroup: withRadioGroup(ElRadioGroup),
      Select: customSelectRender(ElSelect),
      Space: ElSpace,
      Switch: ElSwitch,
      TimePicker: ElTimePicker,
      TreeSelect: withDefaultPlaceholder(ElTreeSelect, 'select'),
      Upload: ElUpload,
    };

    // 将组件注册到全局共享状态中
    globalShareState.setComponents(components);

    // 定义全局共享状态中的消息提示
    globalShareState.defineMessage({
      // 复制成功消息提示
      copyPreferencesSuccess: (title, content) => {
        ElNotification({
          title,
          message: content,
          position: 'bottom-right',
          duration: 0,
          type: 'success',
        });
      },
    });
  }

  export { initComponentAdapter };
